<template>
  <div class="info-popover">
    <el-popover
        :trigger="trigger"
        :placement="placement"
        :width="width"
        v-model="visible"
        :title="title"
    >
      <slot name="content">{{ content }}</slot>
      <div slot="reference" id="reference">
        <slot></slot>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "InfoPopover",
  props: {
    trigger: {
      type: String,
      default: 'hover'
    },
    placement: {
      type: String,
      default: 'bottom'
    },
    width: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: String | Number,
      default: 150
    },
    title: String,
    content: String
  },
  data() {
    return {
      visible: false
    }
  }
}
</script>

<style scoped lang="less">

.info-popover {
  display: inline;
}


</style>
